import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View ,FlatList,TouchableOpacity,Image,Dimensions} from 'react-native';
var {height, width} = Dimensions.get('window');
export default class Xueshuguan extends Component {
  constructor(props) {
    super(props);
    this._renderItem = this._renderItem.bind(this); 
    navigation = props.navigation; 
    this.state = {
        dataSource:[
            {'id':1,'name':"书画研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':2,'name':"陶瓷研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':3,'name':"古建筑研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':4,'name':"藏传佛教文物研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':5,'name':"文博法制研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':6,'name':"考古研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':7,'name':"古文献研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
        ],
        dataSource1:[
            {'id':1,'name':"书画研究所1",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':2,'name':"陶瓷研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':3,'name':"古建筑研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':4,'name':"藏传佛教文物研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':5,'name':"文博法制研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':6,'name':"考古研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
            {'id':7,'name':"古文献研究所",'jianjie':"关于故宫学术的内容汇聚于此"},
        ],
        tabs:1,

    };
  }

  _keyExtractor = (item, index) => item.id;
  _renderItem({item,index}){
    const { navigate } = this.props.navigation;
      return(
        <TouchableOpacity onPress={() => navigate('ProfileD')} activeOpacity={0.3}>
        <View style={{width:width*0.9,height:50,paddingTop:10,flex: 1, flexDirection: 'column',justifyContent: 'flex-start',alignSelf:'center',marginBottom:10}}>
            <View style={{flexDirection:'column',justifyContent:'flex-start',paddingLeft:10}}>
            <Text style={{fontWeight:'',}}> {item.name}</Text>
            </View>
            <View style={{width:width*0.9,height:1,backgroundColor:'#CCCCCC',marginTop:20}}>
            </View>
        </View>
        </TouchableOpacity>
      )
  };
render() {
    if(this.state.tabs == 1){
        return (
            <View style={{flex:1}}>
                <View style={{flexDirection: 'row'}}>
                <TouchableOpacity style={{width:width*0.3,height:50,marginLeft:width*0.2,marginTop:50}} onPress={() => this.setState({tabs:1})}>
                    <View style={{flexDirection:'column',justifyContent:'flex-start',paddingLeft:10}}>
                    <Text style={{fontWeight:'bold',}}>故宫研究院</Text>
                    </View>
                    <View style={{width:90,height:1,backgroundColor:'black',marginTop:10}}>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={{width:width*0.3,height:50,marginTop:50}} onPress={() => this.setState({tabs:2})}>
                <View style={{flexDirection:'column',justifyContent:'flex-start',paddingLeft:10}}>
                <Text style={{fontWeight:'',}}>故宫学院</Text>
                </View>
                <View style={{width:90,height:1,backgroundColor:'#CCCCCC',marginTop:10}}>
                </View>
            </TouchableOpacity>
            </View>
             <FlatList 
             data={this.state.dataSource}
             keyExtractor={this._keyExtractor}
             renderItem={this._renderItem.bind(this)}>
             </FlatList>
             </View>
         )
    }else{
        return (
            <View style={{flex:1}}>
                <View style={{flexDirection: 'row'}}>
                <TouchableOpacity style={{width:width*0.3,height:50,marginLeft:width*0.2,marginTop:50}} onPress={() => this.setState({tabs:1})}>
                    <View style={{flexDirection:'column',justifyContent:'flex-start',paddingLeft:10}}>
                    <Text style={{fontWeight:'',}}>故宫研究院</Text>
                    </View>
                    <View style={{width:90,height:1,backgroundColor:'#CCCCCC',marginTop:10}}>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={{width:width*0.3,height:50,marginTop:50}} onPress={() => this.setState({tabs:2})}>
                <View style={{flexDirection:'column',justifyContent:'flex-start',paddingLeft:10}} >
                <Text style={{fontWeight:'bold',}}>故宫学院</Text>
                </View>
                <View style={{width:90,height:1,backgroundColor:'black',marginTop:10}}>
                </View>
            </TouchableOpacity>
            </View>
             <FlatList 
             data={this.state.dataSource1}
             keyExtractor={this._keyExtractor}
             renderItem={this._renderItem.bind(this)}>
             </FlatList>
             </View>
         )
    }   
       
     }
}


